<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
      <BasicForm @register="registerForm" name="DwProPlanForm"  />

  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref} from 'vue';
    import { useMessage } from '/@/hooks/web/useMessage';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {BasicForm, useForm} from '/@/components/Form/index';
    import {formSchema} from '../DwProPlan.data';
    import {saveOrUpdate} from '../DwProPlan.api';
    import { downloadByData } from '/@/utils/file/download'; // 导入文件下载工具（见下方）
    import { defHttp } from '/@/utils/http/axios';

    // 定义Props和Emits
    const props = defineProps<{ }>();
    const emit = defineEmits(['register', 'success']);
    // 2. 弹窗状态
    const isUpdate = ref(true);
    const isDetail = ref(false);
    const modalType = ref<string>('');    // 存储弹窗传递的 type（add/onEx/edit）


    // 3. 表单配置：仅显示导出所需的字段（如月份）
    const [registerForm, { setProps,resetFields, setFieldsValue, validate, scrollToField,updateSchema }] = useForm({
        labelWidth: 150,
        schemas: formSchema,
        showActionButtonGroup: false,
        baseColProps: {span: 24}
    });
    // 4. 弹窗初始化：重置参数
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {

      //重置表单
      await resetFields();
      // 设置弹窗属性
      setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
      modalType.value = data?.type || '';
      isUpdate.value = !!data?.isUpdate;
      isDetail.value = !data?.showFooter;
      // 动态修改 no 和 orderDate 字段的 show 逻辑
      updateSchema([
        { field: 'orderDate',show: ({ model }) => ['add', 'edit'].includes(modalType.value) && [1, 3].includes(Number(model.orderType))},
        {field: 'queuedDate',show: ({  }) => ['add', 'edit'].includes(modalType.value) },
        { field: 'orderNo', show: ({ model }) => ['add', 'edit'].includes(modalType.value)  &&  Number(model.orderType) !== 2 },
        { field: 'oldOrderNo', show: ({ model }) => ['add', 'edit'].includes(modalType.value)  &&  Number(model.orderType) == 4 },
        { field: 'bhOrderNo', show: ({ model }) => ['add', 'edit'].includes(modalType.value)  &&  (Number(model.orderType) == 2 ||  Number(model.orderType) == 3 )},
        { field: 'bhOrderSum', show: ({ model }) => ['add', 'edit'].includes(modalType.value)  &&  (Number(model.orderType) == 2  ||   Number(model.orderType) == 3)},
        { field: 'childNum', show: ({ model }) => ['add', 'edit'].includes(modalType.value)  &&  Number(model.orderType) !== 2 },
        { field: 'no', show: ({ model }) => ['add', 'edit'].includes(modalType.value)   &&  Number(model.orderType) !== 2 },
        { field: 'machineModel', show: ({  }) => ['add', 'edit'].includes(modalType.value)    },
        { field: 'proLine', show: ({ model }) => ['add', 'edit'].includes(modalType.value)   &&  Number(model.orderType) !== 2 },
        { field: 'monTime', show: ({  }) => modalType.value === 'onEx' }
      ]);

      // 编辑模式下加载数据
        if (unref(isUpdate)) {
            //表单赋值
            await setFieldsValue({
                ...data.record,
            });
        }
        // 隐藏底部时禁用整个表单
       setProps({ disabled: !data?.showFooter })
    });

    // 5. 动态计算标题（修正：关联 modalType，删除重复定义）
    const title = computed(() => {
      // ① 新增模式（!isUpdate）：按 type 区分标题
      if (!unref(isUpdate)) {
        return modalType.value === 'onEx' ? '核算生产计划报表' : '新增订单';
      }
      // ② 非新增模式（编辑/详情）：按 isDetail 区分
      else {
        return unref(isDetail) ? '详情' : '编辑';
      }
    });
    const { createMessage } = useMessage();

    //6. 核心：表单提交（复用父组件动态导出方法）
    async function handleSubmit() {
      // 步骤1：表单验证
      const values = await validate();
      setModalProps({ confirmLoading: true });
        try {
        console.log("========================== ："+ modalType.value);
          if (modalType.value === 'onEx') {
            // 1. 直接发起请求（复制父页面导出的核心逻辑）
            const response = await defHttp.request(
              {
                url: '/dw/dwProPlan/calculateDataexportXls',
                method: 'GET',
                params: { monTime: values.monTime },
                responseType: 'blob', // 关键：与父页面一致
                timeout: 60000,
              },
              {
                isTransformResponse: false, // 禁止转换响应（保持原始Blob）
              }
            );

            // 3. 验证响应是否为有效Blob
            if (!(response instanceof Blob)) {
              throw new Error('导出失败：服务器返回无效数据');
            }

            // 4. 强制设置Excel的MIME类型（解决解析问题）
            const blob = new Blob([response], {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            });
            // 4. 下载Excel文件（使用格式化后的月份命名）
            const month = values.monTime.format('YYYY-MM'); // 假设monTime是Date对象，需按实际格式处理
            downloadByData(blob, `生产计划报表_${month}.xlsx`); // 导出为Excel文件
            createMessage.success('报表导出成功！');

            emit('success');
          }else {

            // 👉 场景2：type≠onEx（如 add/edit）→ 调用 saveOrUpdate 提交接口
            await saveOrUpdate(
              { ...values, type: modalType.value }, // 携带参数和 type 给后端
              unref(isUpdate) // 传递是否为编辑模式的标识
            );

            // 普通提交成功：关闭弹窗 + 通知页面刷新列表
            emit('success');
          }
        } catch (error) {
          // 步骤5：错误处理（保留弹窗）
          if ((error as { errorFields?: any[] })?.errorFields) {
            // 表单验证错误
            const firstField = (error as { errorFields: any[] }).errorFields[0];
            if (firstField) scrollToField(firstField.name);
          } else {
            // 导出/提交错误
            const msg = modalType.value === 'onEx' ? '导出失败' : '提交失败';
            createMessage.error(`${msg}，请重试！`);
            console.error(msg, error);
          }
          return Promise.reject(error);

        } finally {
          setModalProps({ confirmLoading: false });
          closeModal();

        }
    }
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
</style>
